<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="ibox-title">
    <h5>IM呼叫监控</h5><span class="timeText" style="margin-left: 6px;"></span><span class="timess"></span>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right"></span>
                    <h5>机器人会话量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins number1">0</h1>
                    <div class="stat-percent font-bold text-success">
                    </div>
                    <small></small>
                </div>
            </div>
        </div>






    </div>




    <div class="row">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>坐席监控列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table    id="myList"  class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th>坐席工号</th>
                                <th>坐席名称</th>
                                <th>技能组</th>

                                <th>通话总数</th>
                                <th>接听数</th>
                                <th>外呼数</th>
                                <th>外呼成功数</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<th:block th:include="include :: sparkline-js" />
<script type="text/javascript">
    setInterval(function() {
        $("#nav").find("ul").animate({"marginTop":"-20px"},200,function() {
            $(this).css({'marginTop':'0px'}).find("li:first").appendTo(this)
        })
    },2000)
    $(document).ready(function () {

        getData();
        updTime();

        // $.plot($("#flot-dashboard-chart"), dataset, options);
    });

    function updTimes() {

        // 设置倒计时的秒数
        const countdownSeconds = 30;

        // 更新倒计时的函数
        function updateCountdown(secondsRemaining) {
            // 显示倒计时到控制台或页面上的元素
            $(".timess").text(",具体下次刷新时间" + secondsRemaining + '秒')

            if (secondsRemaining == 0) {
                console.log('倒计时结束！');
                getData();
            }

            // 如果还有剩余时间，则递归调用updateCountdown
            if (secondsRemaining > 0) {
                setTimeout(function () {
                    updateCountdown(secondsRemaining - 1);
                }, 1000);
            } else {
                // 倒计时结束时执行的操作
                console.log('Countdown finished');
            }
        }

        // 开始倒计时
        updateCountdown(countdownSeconds);

    }
    function updTime(){
        // 获取当前北京时间的时间戳（单位为毫秒）
        var stamp= new Date().getTime() + 8 * 60 * 60 * 1000;
        // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
        var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
        console.log(beijingTime);
        $(".timeText").text('数据采集时间 '+beijingTime)
    };
    function getData(){
        var flag=0;
        //获取首页数据
        $.ajax({
            type: "post",
            url: ctx + "system/service/listmyd",
            url: ctx + "system/zxjk/list",
            data: {
            },
            success: function(data) {
                if (data.code == 0) {
                    $('#myList tbody').html('');
                    flag=flag+1;
                    if(flag==2){
                        updTimes()
                        updTime();
                        flag=0;
                    }
                    console.log(data)
                    $.each(data.rows, function(index, item) {
                        $('#myList tbody').append(
                            '<tr>' +
                            '<td>' + item.zxId + '</td>' +
                            '<td>' + item.zxName + '</td>' +
                            '<td>' + item.jnz + '</td>' +

                            '<td>' + item.thzt + '</td>' +
                            '<td>' + item.tjs + '</td>' +
                            '<td>' + item.whs + '</td>' +
                            '<td>' + item.whsuccs + '</td>' +
                            '</tr>'
                        );
                    });
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });


        $.ajax({
            type: "post",
            url: ctx + "system/jiankong/listIM",
            data: {
            },
            success: function(data) {
                if (data.code == 0) {
                    flag=flag+1;
                    if(flag==2){
                        updTimes()
                        updTime();
                        flag=0;
                    }
                    console.log(data)
                    let datass=data.rows[0];
                    $(".number1").text(datass.huruliang)
                    $(".number2").text(datass.jietingliang)
                    $(".number3").text(datass.liluyanliang)
                    $(".number4").text(datass.fangqiliang)
                    $(".number5").text(datass.huchuliang)
                    $(".number6").text(datass.huchujt)
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });
    }
</script>

<script type="text/javascript">
    setInterval(function() {
        $("#nav").find("ul").animate({"marginTop":"-20px"},200,function() {
            $(this).css({'marginTop':'0px'}).find("li:first").appendTo(this)
        })
    },2000)


    $(document).ready(function () {
        //获取首页数据

        $.ajax({
            type: "post",
            url: ctx + "system/zxjk/imjk",
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    console.log(data)
                    $.each(data.rows, function (index, item) {
                        $('#myList tbody').append(
                            '<tr>' +
                            '<td>' + item.zxId + '</td>' +
                            '<td>' + item.zxName + '</td>' +
                            '<td>' + item.jnz + '</td>' +
                            '<td>' + item.sxfw + '</td>' +
                            '<td>' + item.thzt + '</td>' +
                            '<td>' + item.tjs + '</td>' +
                            '<td>' + item.whs + '</td>' +
                            '<td>' + item.whsuccs + '</td>' +
                            '</tr>'
                        );
                    });
                } else {
                    $.modal.msg(data.msg);
                }
            }
        });
    }
</script>
</body>
</html>
